<template>
   <div id="app">
      <!-- 路由的出口 -->
      <!-- router-view 跳转页面时会销毁当前组件，再次回来重新加载 -->
      <!-- keep-alive 当跳转时不会摧毁当前组件，隐藏，
      再次跳转回来时不会再次执行 页面不会重新渲染，缓存，不会销毁
      只能用于包裹 router-view 使用
      -->
      <!-- 但是包裹之后所有的页面都缓存了，例如打开文章列表一直是一个页面
      所以我们需要控制哪个页面缓存，哪个页面不缓存 
      通过路由的元信息设置 具体看 vue.js 的 API下的 内置的组件 keep-alive
      -->
      <!-- 元信息是确实的就缓存，元信息没设置就不缓存 -->
      <!-- meta: {     路由的配置
               keepAlive: true
            } -->
      <keep-alive>
         <router-view v-if="$route.meta.keepAlive" />
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive" />
   </div>
</template>
<script>
export default {
   name: 'App'
}
</script>

<style lang="less"></style>
